<template>
	<view class="index">
		<view class="header-box auto pl40 pr40 pt40">
			<!-- 姓名 -->
			<view class="name white dflex alc">
				<view class="fw900 fs36">孙子涵</view>
				<view class="fw24 fw500 ml14">13325728112</view>
			</view>
			<!-- 中心 -->
			<view class="dflex jcsb white mt30">
				<view class="dflex flexc alc">
					<view class="fs40 fw900">980</view>
					<view class="fs24 fw500 mt10">总杯数(杯)</view>
				</view>
				<view class="dflex flexc alc">
					<view class="fs40 fw900">1980</view>
					<view class="fs24 fw500 mt10">总金额(元)</view>
				</view>
				<view class="dflex flexc alc">
					<view class="fs40 fw900">12</view>
					<view class="fs24 fw500 mt10">报备学校(个)</view>
				</view>
			</view>
			<!-- 注册时间 -->
			<view class="mt30 white fs24 fw500">注册时间：2023-01-01</view>
		</view>

		<!-- 中心区域部分 -->
		<view class="center mt30 pb30">
			<!-- 学校切换 -->
			<view class="dflex alc pl30 pt30">
				<view class="color fs44 fw900">金水路第一小学</view>
				<u-icon
					name="arrow-down"
					color="#333"
					size="16"
					customStyle="fontWeight:900;marginLeft:16rpx"
				></u-icon>
			</view>
			<!-- 地址跟提交时间 -->
			<view class="address dflex alc mt10 pl30">
				<image src="../images/location-gray.png" mode="widthFix"></image>
				<view class="fs28 gray ml10">郑州市金水区中州大道</view>
			</view>
			<view class="time dflex alc mt20 pl30">
				<image src="../images/time.png" mode="widthFix"></image>
				<view class="fs28 gray ml10">提交时间:2023-01-01</view>
			</view>

			<!-- 总杯数  总金额 -->
			<view class="money dflex jcsb alc mt40 pl30 pr30">
				<view class="dflex flexc jcsb" style="height: 220rpx;">
					<view><subtitle title="数据汇总"></subtitle></view>
					<view class="dflex jcsb">
						<view class="dflex flexc alc">
							<view class="fs32 color fw900">980</view>
							<view class="fs28 color mt20">总杯数(杯)</view>
						</view>
						<view class="dflex flexc alc" style="margin-left: 100rpx;">
							<view class="fs32 color fw900">1980</view>
							<view class="fs28 color mt20">总金额(元)</view>
						</view>
					</view>
				</view>
				<!-- 背景图 -->
				<view class="money-img dflex flexc alc jcc">
					<view class="fs32 fw900 colora">99980</view>
					<view class="fs24 fw500 colora">总人数(人)</view>
				</view>
			</view>
				<!-- 总杯数  总金额 结束-->
				<view class="students pt30">
					<view class="pl30"><subtitle title="人数汇总"></subtitle></view>
					<!-- tab栏 -->
					<view>
						<u-tabs
							:list="list"
							@click="handerTabs"
							:lineWidth="0"
							activeStyle="color:#4151db;fontWeight:bold;fontSize:28rpx"
							:lineHeight="0"
							inactiveStyle="color:#999"
						></u-tabs>
						<view class="pl30">
							<view
								v-for="(item, index) in arr"
								:key="item.cid"
								class="classes dflex alc pr30"
								style="margin-bottom: 70rpx;"
							>
								<view class="mr40 fs28 gray fw500">{{ item.classes }}</view>
								<u-line-progress
									:percentage="item.num"
									activeColor="#4151DB"
									:showText="false"
									height="10rpx"
								></u-line-progress>
								<view class="fs28 fw500 color">{{ item.num + '人' }}</view>
							</view>
						</view>
					</view>
					<view></view>
				</view>
	
	
	
	
	
	
	
	
	
	
	
	
	
		</view>
	</view>
</template>

<script>
import { indexList } from './indexList.js';
export default {
	data() {
		return {
			list: indexList,
			arr: []
		};
	},
	methods: {
		handerTabs(event) {
			this.arr = event.arr;
			console.log(this.arr);
		}
	},
	onLoad(options) {
		this.arr = indexList[0].arr; //默认进来加载一年级的
		console.log(options);
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f5f9;
}
.index {
	padding-top: 20rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
}
.header-box {
	width: 690rpx;
	height: 316rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	border-radius: 20rpx;
	opacity: 1;
}
.center {
	width: 690rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	background: linear-gradient(119.14deg, rgba(65, 81, 219, 0.2) 0%, rgba(65, 81, 219, 0) 100%);
}
.address {
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.time {
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.money {
	.money-img {
		width: 220rpx;
		height: 220rpx;
		background-image: url('../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
}
.students {
	width: 650rpx;
	padding-bottom: 44rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0 auto;
	margin-top: 52rpx;
}
.classes:last-child{
	margin-bottom: 0 !important;
}
::v-deep .u-line-progress__background{
	background-color: transparent;
}
</style>
